<template>
	
	<view>
		<cu-custom bgColor="bg-gradual-blue" :isBack="true">
			<block slot="backText">返回</block>
			<block slot="content">自定义字段</block>
		</cu-custom>
		<view class="lsc-diy-field">
			<text>字段名称<text style="color: red;">*</text></text>
		</view>
		<view class="cu-form-group">
			<input placeholder="请输入字段名称" name="input" v-model="list.fieldName"></input>
		</view>
		<view class="lsc-diy-field">
			<text>字段描述</text>
		</view>
		<view class="cu-form-group">
			<input placeholder="请说明该字段怎么填写(选填)" name="input" v-model="list.fieldDesc"></input>
		</view>
		<view class="lsc-diy-field">
			<text>
				字段类型
				<text class="justify-center" style="font-size: 22upx;">(支持文本/数字/图片/日期/单选/多选/位置/手写)</text>
			</text>
		</view>
		<view class="cu-form-group" @tap="showDiyAttribute">
			<view class="picker">
				{{ list.fieldType }}
			</view>
			<text class="cuIcon-right"></text>
		</view>
		<view class="cu-modal bottom-modal" :class="modalDiy?'show':''" @tap="hideModalAttribute">
			<view class="cu-dialog" @tap.stop="">
				<view @tap="hideModalAttribute" style="margin-top: 10px">
					<text class="cuIcon-unfold"></text>
				</view>
				<view class="lsc-diy-picker-title">
					<block>选择字段类型</block>
				</view>
				<view class="grid col-3 padding-sm lsc-diy-picker">
					<view v-for="(item,index) in checkbox" class="padding-xs text-left" :key="index"  @tap="tagDiyChange" :data-value="item.title">
						<text class="text-blue" :class="item.icon"></text>
						<text>{{' ' + item.title}}</text>
					</view>
				</view>
			</view>
		</view>
		<view v-if="showOption">
			<view class="lsc-diy-field">
				<text>选项</text>
			</view>
			<view class="cu-form-group" v-for="(item, index) in fieldOptions" :key="index">
				<text class="text-red cuIcon-roundclosefill" @tap="deleteOption" :data-index="index"></text>
				<input placeholder="请输入选项(30字以内)" name="input" style="padding-left: 10px;" ref="opobj"></input>
			</view>
			<view class="cu-form-group" @tap="addOption">
				<text class="text-blue cuIcon-roundaddfill"></text>
				<text class="text-blue text-left" style="width: 100%;padding-left: 10px;">添加选项</text>
			</view>
		</view>
		<view v-if="showString">
			<view class="lsc-diy-field">
				<text>最少字符数</text>
			</view>
			<view class="cu-form-group">
				<picker @change="PickerLeastChange" :value="filedLeast" :range="numberPicker">
					<view class="picker" style="text-align: left;">
						{{numberPicker[filedLeast]}}
					</view>
				</picker>
			</view>
			<view class="lsc-diy-field">
				<text>最多字符数</text>
			</view>
			<view class="cu-form-group">
				<picker @change="PickerMostChange" :value="filedMost" :range="numberPicker">
					<view class="picker" style="text-align: left;">
						{{numberPicker[filedMost]}}
					</view>
				</picker>
			</view>
		</view>
		<view class="flex flex-direction">
			<text class="lsc-diy-tip">{{tip}}</text>
		</view>
		<view class="padding flex flex-direction">
			<button class="cu-btn bg-blue lg" @tap="saveFiled">保存</button>
		</view>
	</view>
</template>

<script>
    import {mapMutations} from 'vuex'
	export default {
		data() {
			return {
				list: {
					fieldType: '',
					activityId: '', //*	integer($int32)活动id
					charMax: 500, //	integer($int32)最大字符数
					charMin: 0, //	integer($int32)最小字符数
					defaultValue: '', //	string默认值
					fieldDesc: '', //	string字段描述
					fieldName: '', //*	string字段名称
					fieldOptionsList: [], //	string如果是下拉框或者多选，则有后选项，以逗号分割，如’男,女’
					id: '', //	integer($int32)活动报名字段id
					orderNum: 0, //	integer($int32)排序号
					remarks: '', //	string备注
					required: 0, //*	integer($int32)否必填，0默认非必填，1必填
					typeCode: '', //	string字段类型代码
					typeName: '', //	string字段类型名称
				},
				modalDiy: false,
				checkbox: [
					{
						title: '单行文本',
						icon: 'cuIcon-edit',
						tips: '适用于输入少量文本，比如学校名称、聚会地点',
					},
					{
						title: '多行文本',
						icon: 'cuIcon-edit',
						tips: '最多支持500个字，适用于备注、详细介绍',
					},
					{
						title: '数字',
						icon: 'cuIcon-edit',
						tips: '适用于输入数字的数据，比如年龄、身高',
					},
					{
						title: '日期',
						icon: 'cuIcon-edit',
						tips: '格式如：2019-12-31',
					},
					{
						title: '时间',
						icon: 'cuIcon-edit',
						tips: '格式如：23：59',
					},
					{
						title: '手机号',
						icon: 'cuIcon-edit',
						tips: '适用于需要填写手机号的信息，比如：联系方式',
					},
					{
						title: '单项选择',
						icon: 'cuIcon-edit',
						tips: '适用于多个中选出一个，比如性别、年级、省份',
					},
					{
						title: '多项选择',
						icon: 'cuIcon-edit',
						tips: '适用于从多个中选择几个，比如兴趣爱好',
					},
					{
						title: '下拉框',
						icon: 'cuIcon-edit',
						tips: '单选内容较多时，适合使用下拉框',
					},
					{
						title: '地理位置',
						icon: 'cuIcon-edit',
						tips: '用户让发起者从地图中点选位置，如地址',
					},
					{
						title: '上传单图',
						icon: 'cuIcon-edit',
						tips: '允许报名者上传单张图片',
					},
					{
						title: '上传多图',
						icon: 'cuIcon-edit',
						tips: '允许报名者上传多张图片',
					},
					{
						title: '省/市/区',
						icon: 'cuIcon-edit',
						tips: '适用于收货地址等',
					},
					{
						title: '手写签名',
						icon: 'cuIcon-edit',
						tips: '报名者可以手绘图形，适用于手写签名、涂鸦',
					},
					{
						title: '标签',
						icon: 'cuIcon-edit',
						tips: '适用于衣服尺码、颜色、状态等',
					}
				],
				numberPicker: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 20, 30, 40, 50, 100, 200, 300, 400, 500],
				filedLeast: 0,
				filedMost: 18,
				fieldOptions: [],
				tip: '',
				showString: false,
				showOption: false,
				num: 0,
				setID: 0,
			};
		},
		computed: {
			
		},
		onLoad(e) {
			console.log(e.title)
			this.list.fieldType = e.title
			this.setID = e.id
			//选择不同类型的提示句
			this.checkOption(e.title)
		},
		methods: {
			...mapMutations(['getField']),
			showDiyAttribute() {
				this.modalDiy = true
			},
			hideModalAttribute() {
				this.modalDiy = false
			},
			tagDiyChange(e) {
				const type = e.currentTarget.dataset.value
				this.list.fieldType = type
				this.hideModalAttribute()
				//选择不同类型的提示句
				this.checkOption(type)
				
			},
			checkOption(type) {
				const fieldOption = ['单项选择', '多项选择', '下拉框', '标签']
				if(fieldOption.indexOf(type) > -1) {
					this.showOption = true
					this.showString = false
				}else if(type === '单行文本'){
					this.showString = true
					this.showOption = false
				}else {
					this.showString = false
					this.showOption = false
				}
				this.checkbox.filter(ele => {
					if(ele.title === type) return this.tip = ele.tips
				})
			},
			PickerLeastChange(e) {
				this.filedLeast = e.detail.value
				this.list.charMin = this.numberPicker.filter((ele, index) => {
					if(this.filedLeast === index) return ele
				})[0]
			},
			PickerMostChange(e) {
				this.filedMost = e.detail.value
				this.list.charMax = this.numberPicker.filter((ele, index) => {
					if(this.filedMost === index) return ele
				})[0]
			},
			deleteOption(e) {
				const index = e.target.dataset.index
				if(this.fieldOptions.length > 0) {
					this.fieldOptions.splice(index, 1)
					this.list.fieldOptionsList.splice(index, 1)
				}
			},
			addOption() {
				this.fieldOptions.push(this.num++)
			},
			saveFiled() {
				if(!this.list.fieldName) {
					uni.showToast({
						icon: 'none',
						title: '请填写字段名称',
						duration: 1500
					})
					return
				}
				
				this.list.index = this.setID*1
				const opObj = this.$refs.opobj
				if(opObj !== undefined && opObj.length) {
					this.list.fieldOptionsList = []
					opObj.forEach(ele => {
						if(ele !== '') {
							this.list.fieldOptionsList.push(ele.inputValue)
						}
					})
				}
				// this.$refs.opobj.forEach(ele => {
				// 	this.list.fieldOptions.push(ele.inputValue)
				// })
				this.getField(this.list)
				uni.navigateBack()
			}
			
		}
	};
</script>

<style>
	.lsc-diy-field {
		color: #666;
		padding: 18upx 28upx;
	}
	.lsc-diy-picker {
		border: 1px solid #AAAAAA;
		margin: 20upx;
	}
	.lsc-diy-picker-title {
		padding-left: 25upx;
		text-align: left;
		color: #AAAAAA;
	}
	.lsc-diy-tip {
		color: #AAAAAA;
		font-size: 22upx;
		padding: 10px;
	}
</style>
